<template>
    <a-card title="" :bordered="false">
      <!--
        【即时保存大体思路】：
        1. JVxeTable 上必须加 keep-source 属性
        2. 监听 edit-closed事件，这个事件是在编辑完成后触发
        3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
      -->
      <j-vxe-table
        toolbar
        :toolbarConfig="toolbarConfig"
  
        row-number
        row-selection
        keep-source
        async-remove
  
        :height="640"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        
  
        @save="handleTableSave"
        @remove="handleTableRemove"
        @edit-closed="handleEditClosed"
        @pageChange="handlePageChange"
        @selectRowChange="handleSelectRowChange"
      />
    </a-card>
</template>
  
  <script>
    import { getAction, postAction, putAction } from '@api/manage'
    import { JVXETypes } from '@/components/jeecg/JVxeTable'
  
    // 即时保存示例
    export default {
      name: 'YksEquipmentRundata',
      data() {
        return {
          // 工具栏的按钮配置
          toolbarConfig: {
            // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
            // btn: ['add', 'save', 'remove', 'clearSelection']
            btn: [ '']
          },
          // 是否正在加载
          loading: false,
          // 分页器参数
          pagination: {
            // 当前页码
            current: 1,
            // 每页的条数
            pageSize: 200,
            // 可切换的条数
            pageSizeOptions: ['10', '20', '30', '100', '200'],
            // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
            total: 0,
          },
          // 选择的行
          selectedRows: [],
          // 数据源，控制表格的数据
          dataSource: [],
          // 列配置，控制表格显示的列
          columns: [
            {key: 'parameterPlcId', title: 'AKTICP系统变量ID编码', width: '80px'},
            {key: 'parameterFirstGroup', title: 'PLC变量所属一级组', width: '180px'},
            {key: 'parameterSecondGroup', title: 'PLC变量所属二级组', width: '180px'},
            // {
            //   // 字段key，跟后台数据的字段名匹配
            //   key: 'parameterFirstGroup_DictText',
            //   // 列的标题
            //   title: 'PLC变量所属一级组',
            //   // 列的宽度
            //   width: '180px',
            //   dictCode: 'parameter_group',
            //   // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
            // //   type: JVXETypes.input
            // },
            // {
            //   // 字段key，跟后台数据的字段名匹配
            //   key: 'parameterSecondGroup_DictText',
            //   // 列的标题
            //   title: 'PLC变量所属二级组',
            //   // 列的宽度
            //   width: '180px',
            //   dictCode: 'parameter_group',
            //   // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
            // //   type: JVXETypes.input
            // },
            {key: 'parameterName', title: '变量名称', width: '80px'},
            {key: 'isRevise', title: '是否修正变量值', width: '120px',type: JVXETypes.select,options: [],
            dictCode: 'yn',
            placeholder: '请选择',},
            {key: 'isReport', title: '是否出报表', width: '120px',type: JVXETypes.select,options: [],
            dictCode: 'yn',
            placeholder: '请选择',},
            {key: 'parameterAddress', title: 'PLC变量地址', width: '80px'},
            {key: 'plcModel_DictText', title: 'PLC品牌型号', width: '120px',dictCode: 'plc_model'},
            {key: 'dataType_DictText', title: 'PLC数据类型', width: '120px',dictCode: 'parameter_data_type'},
            {key: 'readWrite_DictText', title: '读写性质', width: '120px',dictCode: 'parameter_readandwrite_type'},
            {
              key: 'range',
              title: '范围',
              // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
              // 如果要做占满表格的列可以这么写
              minWidth: '180px'
            },
            {key: 'referenceValue', title: '变量参考值', width: '120px'},
            {key: 'unit', title: '单位', width: '120px'},
            
          ],
          // 查询url地址
          url: {
            config:"/mng/yksEquipmentManageRundata/list",
            list: "/mng/yksEquipmentRundata/rundatalist",
            // getData: '/mock/vxe/getData',

            // 模拟保存单行数据（即时保存）
            saveRow: '/mng/yksEquipmentManageRundata/immediateSaveRow',
            // 模拟保存整个表格的数据
            saveAll: '/mock/vxe/immediateSaveAll',
          },
          currentEquipmentId:''
        }
      },
      mounted() {
        setInterval(() => {
          // 刷新页面的逻辑，例如重新加载数据
          //this.loadConfigData(1);
        }, 20000); // 每5000毫秒（5秒）执行一次
      },
      created() {
        // this.currentEquipmentId = record.id
        // this.loadConfigData(1)
        // this.loadData()
      },
      methods: {
        open(record) {
        this.currentEquipmentId = record.id
        this.loadConfigData(1)
      },
        // 加载数据
        // loadData() {
        //   // 封装查询条件
        //   let formData = {
        //     pageNo: this.pagination.current,
        //     pageSize: this.pagination.pageSize
        //   }
        //   // 调用查询数据接口
        //   this.loading = true
        //   getAction(this.url.getData, formData).then(res => {
        //     if (res.success) {
        //       // 后台查询回来的 total，数据总数量
        //       this.pagination.total = res.result.total
        //       // 将查询的数据赋值给 dataSource
        //       this.dataSource = res.result.records
        //       // 重置选择
        //       this.selectedRows = []
        //     } else {
        //       this.$error({title: '主表查询失败', content: res.message})
        //     }
        //   }).finally(() => {
        //     // 这里是无论成功或失败都会执行的方法，在这里关闭loading
        //     this.loading = false
        //   })
        // },
        loadConfigData(arg){
        if(!this.url.config){
          this.$message.error("请设置url.config属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        // if (arg === 1) {
        //   this.ipagination.current = 1;
        // }
        var params = {};//查询条件
        params.equipmentId = this.currentEquipmentId
        this.loading = true;
        getAction(this.url.config, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.pagination.total = res.result.total;
            }else{
              this.pagination.total = 0;
            }
            debugger
            for(var key=0;key<res.result.length;key++){
              
              this.loadData(1,res.result[key])
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      loadData(arg,parameter) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        let that=this
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.pagination.current = 1;
        }
        var params = {};//查询条件
        params.equipmentId = this.currentEquipmentId
        params.column = 'createTime'
        params.order='desc'
        params.pageSize=12
        params.parameterId=parameter.parameterId
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            //this.dataSource = res.result.records||res.result;
            let datas=res.result.records||res.result;
            let key
            let keyConfig
            //let dataSource= Object.assign([], that.dataSource);
            // for(key in dataSource){
              let configDatas=datas
              for(keyConfig in configDatas){
                if(keyConfig<=12){
                  ///没有列，动态增加显示列
                  
                   if(that.columns.filter(p=>p.key==("parameterLatest"+keyConfig)).length<=0){
                    
                    if(keyConfig==0){
                      //that.superFieldList.push({type:'string',value:'parameterLatest'+keyConfig,text:'最新值',dictCode:''})
                      //that.superFieldList.push({type:'date',value:'parameterLatestDate'+keyConfig,text:'最新时间',dictCode:''})
                      that.columns.push({key: 'parameterLatest'+keyConfig, title: '最新值', width: '80px'})
                      that.columns.push({key: 'parameterRevisedata'+keyConfig, title: '修正后最新值', width: '100px'})
                      that.columns.push({key: 'parameterLatestDate'+keyConfig, title: '最新时间', width: '150px'})
                      //that.columns.push({title:'最新值',align:"center",dataIndex: 'parameterLatest'+keyConfig})
                      //that.columns.push({title:'最新时间',align:"center",dataIndex: 'parameterLatestDate'+keyConfig})
                    }else{
                        that.columns.push({key: 'parameterLatest'+keyConfig, title: '值'+keyConfig, width: '80px'})
                        that.columns.push({key: 'parameterRevisedata'+keyConfig, title: '修正后值'+keyConfig, width: '100px'})
                      that.columns.push({key: 'parameterLatestDate'+keyConfig, title: '时间'+keyConfig, width: '150px'})
                      //that.superFieldList.push({type:'string',value:'parameterLatest'+keyConfig,text:'值'+keyConfig,dictCode:''})
                      //that.superFieldList.push({type:'date',value:'parameterLatestDate'+keyConfig,text:'时间'+keyConfig,dictCode:''})
                      //that.columns.push({title:'值'+keyConfig,align:"center",dataIndex: 'parameterLatest'+keyConfig})
                      //that.columns.push({title:'时间'+keyConfig,align:"center",dataIndex: 'parameterLatestDate'+keyConfig})
                    }
                   }
                   parameter['parameterLatest'+keyConfig]=configDatas[keyConfig].parameterRealtimedata
                   parameter['parameterLatestDate'+keyConfig]=configDatas[keyConfig].createTime
                   parameter['parameterRevisedata'+keyConfig]=configDatas[keyConfig].parameterRevisedata
                }
                else{
                  break;
                }
              }
            // }
            //that.dataSource=dataSource
            
            // if(res.result.total)
            // {
            //   this.ipagination.total = res.result.total;
            // }else{
            //   this.ipagination.total = 0;
            // }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      }
        ,
        
  
        // 【整体保存】点击保存按钮时触发的事件
        handleTableSave({$table, target}) {
          // 校验整个表格
          $table.validate().then((errMap) => {
            // 校验通过
            if (!errMap) {
              // 获取所有数据
              let tableData = target.getTableData()
              console.log('当前保存的数据是：', tableData)
              // 获取新增的数据
              let newData = target.getNewData()
              console.log('-- 新增的数据：', newData)
              // 获取删除的数据
              let deleteData = target.getDeleteData()
              console.log('-- 删除的数据：', deleteData)
  
              // 【模拟保存】
              this.loading = true
              postAction(this.url.saveAll, tableData).then(res => {
                if (res.success) {
                  this.$message.success(`保存成功！`)
                } else {
                  this.$message.warn(`保存失败：` + res.message)
                }
              }).finally(() => {
                this.loading = false
              })
            }
          })
        },
  
        // 触发单元格删除事件
        handleTableRemove(event) {
  
          // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
          console.log('待删除的数据: ', event.deleteRows)
          // 也可以只传ID，因为可以根据ID删除
          let deleteIds = event.deleteRows.map(row => row.id)
          console.log('待删除的数据ids: ', deleteIds)
  
          // 模拟请求后台删除
          this.loading = true
          window.setTimeout(() => {
            this.loading = false
            this.$message.success('删除成功')
            // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
            event.confirmRemove()
          }, 1000)
        },
  
        // 单元格编辑完成之后触发的事件
        handleEditClosed(event) {
            
          let {$table, row, column} = event
  
          let field = column.property
          let cellValue = row[field]
          // 判断单元格值是否被修改
          if ($table.isUpdateByRow(row, field)) {
            // 校验当前行
            $table.validate(row).then((errMap) => {
              // 校验通过
              if (!errMap) {
                // 【模拟保存】
                let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
                console.log('即时保存数据：', row)
                putAction(this.url.saveRow, row).then(res => {
                  if (res.success) {
                    this.$message.success(`"${column.title}"保存成功！`)
                    // 局部更新单元格为已保存状态
                    $table.reloadRow(row, null, field)
                  } else {
                    this.$message.warn(`"${column.title}"保存失败：` + res.message)
                  }
                }).finally(() => {
                  hideLoading()
                })
              }
            })
          }
        },
  
        // 当分页参数变化时触发的事件
        handlePageChange(event) {
          // 重新赋值
          this.pagination.current = event.current
          this.pagination.pageSize = event.pageSize
          // 查询数据
          this.loadData()
        },
  
        // 当选择的行变化时触发的事件
        handleSelectRowChange(event) {
          this.selectedRows = event.selectedRows
        },
  
      },
    }
  </script>
  
  <style scoped>
  
  </style>